<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改医生信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-doctor-edit" th:object="${clinicDoctorInfo}">
            <input name="doctorId" th:field="*{doctorId}" type="hidden">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">医生姓名：</label>
                    <div class="col-sm-8">
                        <input name="doctorName" th:field="*{doctorName}" class="form-control" type="text" maxlength="20" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">医生身份证号：</label>
                    <div class="col-sm-8">
                        <input name="identityCardNum" th:field="*{identityCardNum}" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">科室：</label>
                    <div class="col-sm-8">
                        <input name="departmentName" th:field="*{departmentName}" class="form-control" type="text" maxlength="20" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">职称：</label>
                    <div class="col-sm-8">
                        <input name="doctorTitle" th:field="*{doctorTitle}" class="form-control" type="text" maxlength="20" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">医生签字日期：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="doctorVisaDate" th:value="${#dates.format(clinicDoctorInfo.doctorVisaDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-5 control-label is-required">年限：</label>
                    <div class="col-sm-7">
                        <div class="radio-box">
                            <input name="isFiveExperience" class="form-control"
                                   th:value="0" th:checked="${clinicDoctorInfo.isFiveExperience} == '0'"
                                   type="radio" required><label>不满5年</label>
                        </div>
                        <div class="radio-box">
                            <input name="isFiveExperience" class="form-control"
                                   th:value="1" th:checked="${clinicDoctorInfo.isFiveExperience} == '1'"
                                   type="radio" required><label>满5年</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">是否全职：</label>
                    <div class="col-sm-6">
                        <div class="radio-box">
                            <input name="isFullTimeJob" class="form-control"
                                   th:value="0" th:checked="${clinicDoctorInfo.isFullTimeJob} == '0'"
                                   type="radio" required><label>否</label>
                        </div>
                        <div class="radio-box">
                            <input name="isFullTimeJob" class="form-control"
                                   th:value="1" th:checked="${clinicDoctorInfo.isFullTimeJob} == '1'"
                                   type="radio" required><label>是</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">是否负责人：</label>
                    <div class="col-sm-6">
                        <div class="radio-box">
                            <input name="isDirector" class="form-control"
                                   th:value="0" th:checked="${clinicDoctorInfo.isDirector} == '0'"
                                   type="radio" required><label>否</label>
                        </div>
                        <div class="radio-box">
                            <input name="isDirector" class="form-control"
                                   th:value="1" th:checked="${clinicDoctorInfo.isDirector} == '1'"
                                   type="radio" required><label>是</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">是否法人：</label>
                    <div class="col-sm-6">
                        <div class="radio-box">
                            <input name="isLegalPerson" class="form-control" th:field="*{isLegalPerson}"
                                   th:value="0" th:checked="${clinicDoctorInfo.isLegalPerson} == '0'"
                                   type="radio" required><label>否</label>
                        </div>
                        <div class="radio-box">
                            <input name="isLegalPerson" class="form-control" th:field="*{isLegalPerson}"
                                   th:value="1" th:checked="${clinicDoctorInfo.isLegalPerson} == '1'"
                                   type="radio" required><label>是</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">多点/唯一点：</label>
                    <div class="col-sm-6">
                        <div class="radio-box">
                            <input name="pointType" class="form-control"
                                   th:value="2" th:checked="${clinicDoctorInfo.pointType} == '2'"
                                   type="radio" required><label>多点</label>
                        </div>
                        <div class="radio-box">
                            <input name="pointType" class="form-control"
                                   th:value="1" th:checked="${clinicDoctorInfo.pointType} == '1'"
                                   type="radio" required><label>唯一点</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">是否到场：</label>
                    <div class="col-sm-6">
                        <div class="radio-box">
                            <input name="isPresent" class="form-control"
                                   th:value="0" th:checked="${clinicDoctorInfo.isPresent} == '0'"
                                   type="radio" required><label>否</label>
                        </div>
                        <div class="radio-box">
                            <input name="isPresent" class="form-control"
                                   th:value="1" th:checked="${clinicDoctorInfo.isPresent} == '1'"
                                   type="radio" required><label>是</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">所在省份：</label>
                    <div class="col-sm-6">
                        <input id="provinceIdVal" type="hidden" th:value="${clinicDoctorInfo.provinceId}">
                        <select id="provinceIdSelect" onchange="provinceChangeFun()" class="form-control" name="provinceId" data-none-selected-text="请选择" required>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-6 control-label is-required">所在城市：</label>
                    <div class="col-sm-6">
                        <input id="cityIdVal" type="hidden" th:value="${clinicDoctorInfo.cityId}">
                        <select id="cityIdSelect" class="form-control" name="cityId" data-none-selected-text="请选择" required>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">期望薪水：</label>
                    <div class="col-sm-8">
                        <input name="expectSalary" th:field="*{expectSalary}" class="form-control" type="text" maxlength="50" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">手机号：</label>
                    <div class="col-sm-8">
                        <input name="mobile" th:field="*{mobile}" class="form-control" type="text" maxlength="20">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">微信号：</label>
                    <div class="col-sm-8">
                        <input name="weixin" th:field="*{weixin}" class="form-control" type="text" maxlength="60" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea name="remark" class="form-control" maxlength="500">[[*{remark}]]</textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">医生照片：</label>
                    <div class="col-sm-8">
                        <input id="doctorImageUrl" type="hidden" name="doctorImage" th:field="*{doctorImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload-doctor-image" id="doctorImage" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">其他证件：</label>
                    <div class="col-sm-8">
                        <input id="otherImageUrl" type="hidden" name="otherImage" th:field="*{otherImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload-other-image" id="otherImage" multiple name="files" type="file">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "clinic/doctor";
        $("#form-doctor-edit").validate({
            focusCleanup: true,
            rules: {
                doctorVisaDate:{
                    dateISO:true,
                },
                mobile:{
                    isPhone:true,
                },
                expectSalary:{
                    number:true
                },
            },
            messages: {
                doctorVisaDate: {
                    dateISO: "日期格式不正确"
                },
                mobile: {
                    isPhone: "手机号格式不正确"
                },
                expectSalary:{
                    number: "薪水格式不正确"
                }
            },
        });

        function submitHandler() {
            if ($.validate.form()) {
                // 判断医生图片是否上传
                if($('#doctorImageUrl').val() === ""){
                    $.modal.msgError("请重新上传医生图片");
                    return ;
                }
                if($('#otherImageUrl').val() === ""){
                    $.modal.msgError("请重新上传其他证件图片");
                    return ;
                }
                $.operate.save(prefix + "/edit", $('#form-doctor-edit').serialize());
            }
        }

        $("input[name='doctorVisaDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        // 全局缓存省市数据组数据
        var provinceCityArray = [];

        /**
         * 初始化所在省份列表
         */
        function initProvinceFun(){
            // 查询省市
            $.post(ctx + "clinic/province/queryClinicProvinceCityList", {}, function(result) {
                if (result.code == web_status.SUCCESS) {
                    provinceCityArray = eval(result.data);
                    var optionArray = [];
                    var optionStr = '<option value="">请选择</option>';
                    optionArray.push(optionStr)
                    provinceCityArray.forEach(function(element){
                        var id = element.id;
                        var name = element.name;
                        optionStr = '<option value='+id+' >'+name+'</option>';
                        optionArray.push(optionStr)
                    });
                    $('#provinceIdSelect').html(optionArray.join(''));
                    // 获取省份ID
                    var provinceId = $('#provinceIdVal').val();
                    $('#provinceIdSelect').val(provinceId);
                    // 初始化加载城市列表
                    initCityFun(provinceId);
                } else {
                    $.modal.alertError(result.msg);
                }
            });
        }

        /**
         * 根据省份ID，初始化城市下拉列表
         * @param provinceId
         */
        function initCityFun(provinceId){
            var cityList = getCityList(provinceId);
            if(cityList == null){
                $('#cityIdSelect').html('');
                return ;
            }
            // 构建城市html下拉列表
            buildCitySelectHtml(cityList);
            var cityId = $('#cityIdVal').val();
            $('#cityIdSelect').val(cityId)
        }

        /**
         * 根据省选择城市
         */
        function provinceChangeFun() {
            var provinceId = $('#provinceIdSelect').val();
            if(provinceId == null || provinceId === ''){
                $('#cityIdSelect').html('');
                return ;
            }
            var cityList = getCityList(provinceId);
            if(cityList == null){
                $('#cityIdSelect').html('');
                return ;
            }
            buildCitySelectHtml(cityList);
        }

        /**
         * 根据省份ID获取城市列表
         * @param provinceId
         * @returns {null}
         */
        function getCityList(provinceId){
            var cityList = null;
            for (var element of provinceCityArray) {
                if(element.id === Number.parseInt(provinceId)){
                    cityList = element.cityList;
                    break;
                }
            }
            return cityList;
        }

        /**
         * 根据城市数据列表，构建城市下拉列表
         * @param cityList
         */
        function buildCitySelectHtml(cityList){
            var cityOptionArray = [];
            var optionStr = '<option value="">请选择</option>';
            cityOptionArray.push(optionStr);
            cityList.forEach(function(element){
                var cityId = element.id;
                var cityName = element.name;
                var cityOptionStr = '<option value='+cityId+'>'+cityName+'</option>';
                cityOptionArray.push(cityOptionStr);
            });
            $('#cityIdSelect').html(cityOptionArray.join(''));
        }

        /**
         * 医生照片上传
         */
        var doctorImageUrl = $('#doctorImageUrl').val();
        $(".file-upload-doctor-image").fileinput({
            uploadUrl: ctx + 'common/upload',
            initialPreviewAsData: true,
            initialPreview: [doctorImageUrl],
            maxFileCount: 1,
            validateInitialCount:true,
            autoReplace: true,
            uploadAsync: true, // 是否异步上传
            showUpload: true, // 是否显示上传按钮
            showRemove: true, // 是否显示移除按钮
            showClose: false, // 是否显示关闭按钮
            allowedFileExtensions: ['jpg', 'png','bmp','jpeg'],
            layoutTemplates:{//图片下方的上传和删除按钮
                // actionDownload: '',
                actionUpload:'',    //设置为空可去掉上传按钮
                // actionDelete:''  //设置为空可去掉删除按钮
            },
        }).on('fileuploaded', function (event, data, previewId, index) {
            // $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
            $("#doctorImageUrl").val(data.response.fileName)
        }).on('fileremoved', function (event, id, index) {
            // $("input[name='" + event.currentTarget.id + "']").val('')
            $("#doctorImageUrl").val('')
        }).on("fileclear",function(event, data, msg){
            $("#doctorImageUrl").val('')
        }).on('fileerror', function(event, data, msg) {  //文件上传失败
            $.modal.msgError("医生照片上传失败");
        });
        $(".file-upload-doctor-image").fileinput('_initFileActions');

        /**
         * 其他证件图片上传
         */
        var otherImageUrl = $('#otherImageUrl').val();
        var otherImageUrlArray = otherImageUrl.split(",");
        $(".file-upload-other-image").fileinput({
            uploadUrl: ctx + 'common/uploads',
            initialPreviewAsData: true,
            initialPreview: otherImageUrlArray,
            maxFileCount: 5,
            validateInitialCount:true,
            autoReplace: true,
            uploadAsync: false, // 是否异步上传
            showUpload: true, // 是否显示上传按钮
            showRemove: true, // 是否显示移除按钮
            showClose: false, // 是否显示关闭按钮
            allowedFileExtensions: ['jpg', 'png','bmp','jpeg'],
            layoutTemplates:{//图片下方的上传和删除按钮
                // actionDownload: '',
                actionUpload:'',    //设置为空可去掉上传按钮
                // actionDelete:''  //设置为空可去掉删除按钮
            },
        }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
            // $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
            $("#otherImageUrl").val(data.response.fileNames)
        }).on('fileremoved', function (event, id, index) {
            // $("input[name='" + event.currentTarget.id + "']").val('')
            $("#otherImageUrl").val('')
        }).on("fileclear",function(event, data, msg){
            $("#otherImageUrl").val('')
        }).on('fileerror', function(event, data, msg) {  //文件上传失败
            $.modal.msgError(data);
        });
        $(".file-upload-other-image").fileinput('_initFileActions');

        // 页面初始化完成在执行
        $(function(){
            // 加载所在省份下拉选择
            initProvinceFun();
        });
    </script>
</body>
</html>